/* 自定义 element 暗黑模式样式 */
html.dark {
	color-scheme: dark;
	--el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.36), 0px 8px 20px rgba(0, 0, 0, 0.72);
	--el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.72);
	--el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.72);
	--el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.72), 0px 12px 32px #000000, 0px 8px 16px -8px #000000;
	--el-bg-color-page: #0a0a0a;
	--el-bg-color: #141414;
	--el-bg-color-overlay: #1d1e1f;
	--el-text-color-primary: #e5eaf3;
	--el-text-color-regular: #cfd3dc;
	--el-text-color-secondary: #a3a6ad;
	--el-text-color-placeholder: #8d9095;
	--el-text-color-disabled: #6c6e72;
	--el-border-color-darker: #636466;
	--el-border-color-dark: #58585b;
	--el-border-color: #4c4d4f;
	--el-border-color-light: #414243;
	--el-border-color-lighter: #363637;
	--el-border-color-extra-light: #2b2b2c;
	--el-fill-color-darker: #424243;
	--el-fill-color-dark: #39393a;
	--el-fill-color: #303030;
	--el-fill-color-light: #262727;
	--el-fill-color-lighter: #1d1d1d;
	--el-fill-color-extra-light: #191919;
	--el-fill-color-blank: transparent;
	--el-mask-color: rgba(0, 0, 0, 0.8);
	--el-mask-color-extra-light: rgba(0, 0, 0, 0.3);

	// * 以下为自定义暗黑模式内容
	// login
	.login-container {
		background-color: var(--el-fill-color-extra-light) !important;
		.login-box {
			background-color: var(--el-mask-color) !important;
			.login-form {
				background-color: var(--el-bg-color) !important;
				.logo-text {
					color: var(--el-text-color-primary) !important;
				}
			}
		}
	}

	// scroll-bar
	::-webkit-scrollbar {
		background-color: var(--el-scrollbar-bg-color) !important;
	}
	::-webkit-scrollbar-thumb {
		background-color: var(--el-border-color-darker) !important;
	}

	// content-box
	.content-box {
		.text {
			color: var(--el-text-color-regular) !important;
		}
	}

	// error-message
	.not-container {
		.not-detail {
			h2 {
				color: var(--el-text-color-primary) !important;
			}
		}
	}

	// el-table
	.table-box,
	.table {
		.el-table {
			.el-table__header th {
				color: var(--el-text-color-regular) !important;
				background-color: var(--el-bg-color) !important;
			}
		}
	}

	// layout
	.el-container {
	  .menu{
			background-color: var(--el-bg-color) !important;
		}
		.not-aside {
			border-right: none !important;
		}
		.el-header {
			background-color: var(--el-bg-color) !important;
			border-bottom-color: var(--el-border-color-light) !important;
		}
		.el-main {
			background-color: var(--el-bg-color) !important;
			.card {
				background-color: var(--el-bg-color) !important;
			}
		}
		.el-tabs {
			background-color: var(--el-bg-color) !important;
		}
		.el-footer {
			.footer {
				background-color: var(--el-bg-color) !important;
				border-top-color: var(--el-border-color-light) !important;
				a {
					color: var(--el-text-color-regular) !important;
				}
			}
		}
	}

	// menu
	.el-menu,
	.el-sub-menu,
	.el-menu-item,
	.el-sub-menu__title {
		background-color: var(--el-bg-color) !important;
		&:not(.is-active) {
			color: #bdbdc0 !important;
		}
		&.is-active {
			background-color: #060708 !important;
		}
	}
	.el-menu-item:not(.is-active):hover {
		background-color: var(--el-bg-color) !important;
	}
	.aside-split {
		background-color: var(--el-bg-color) !important;
	}

	// guide
	#driver-highlighted-element-stage {
		background-color: var(--el-color-info-light-5) !important;
	}
}
